<template>
  <div class="box">
    <div class="main">
      <div class="sub-title">
        <img src="@/assets/images/teachers.png" alt="" />
      </div>

      <div class="teahersBox">
        <div
          class="course-item"
          v-for="(item, index) in teachersList"
          :key="index"
        >
          <div class="img"><img :src="item.filePath" alt=""/></div>
          <div class="right">
            <div class="name">{{ item.teacherName }}</div>
            <div class="testclass">{{ item.functionalDescription }}</div>
            <div class="brief">{{item.teacherIntroduction}}</div>
          </div>
        </div>
      </div>

<!--      <div class="move">-->
<!--        <div class="card">-->
<!--          <div class="img">-->
<!--            <div class="border">-->
<!--              <div class="rand"><img src="@/assets/images/ks-ico.png"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="tit">考试大纲</div>-->
<!--          <div class="content">-->
<!--            <p>行政职测介绍</p>-->
<!--            <p>考试做答要求</p>-->
<!--            <p>小白如何备考</p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="card">-->
<!--          <div class="img">-->
<!--            <div class="border">-->
<!--              <div class="rand"><img src="@/assets/images/bm-ico.png"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="tit">报考条件</div>-->
<!--          <div class="content">-->
<!--            <p>报考年龄要求</p>-->
<!--            <p>报考学历要求</p>-->
<!--            <p>体检政审问题</p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="card">-->
<!--          <div class="img">-->
<!--            <div class="border">-->
<!--              <div class="rand"><img src="@/assets/images/cx-ico.png"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="tit">职位表查询</div>-->
<!--          <div class="content">-->
<!--            <p>历年岗位表格</p>-->
<!--            <p>报考专业要求</p>-->
<!--            <p>基层工作经验</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script setup lang="ts">
import { getTeacherList } from "@/api/home";
const teachersList = ref([]);

const getTeacherData = () => {
  getTeacherList().then((res) => {
    teachersList.value = res.rows?.length > 8 ? res.rows.slice(0, 8) : res.rows;
  });
};

onMounted(() => {
  getTeacherData();
});
</script>
<style lang="scss" scoped>
.box {
  background: #f5f7fa;
  .main {
    width: 1154px;
    margin: 0 auto;
    padding: 30px 0 50px;
    .sub-title {
      display: flex;
      align-items: flex-start;
      margin-bottom: 30px;
      img {
        width: 161px;
        height: 26px;
      }
    }

    // 内容
  }
}
.teahersBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .course-item{
    cursor: pointer;
    margin: 0 1.5% 1.5% 0;
    width: calc(50% - 0.75%);
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    transition: all .5s;
    background: #fff;
    display: flex;
    &:nth-child(2n){
      margin-right: 0;
    }
    .img{
      width: 38%;
      height: 320px;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .right{
      width: 62%;
      box-sizing: border-box;
      padding: 1% 5%;
      .name{
        line-height: 50px;
        font-size: 24px;
        color: #333;
      }
      .testclass{
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        overflow: hidden;
      }
    .brief{
      display: block;
      height: 105px;
      overflow: hidden;
      margin-top: 10px;
      line-height: 35px;
      font-size: 16px;
      color: #999;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      text-align: left;
    }
    }
    &:hover {
      transform: translateY(-10px);
    }
  }
}
.move{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .card{
    width: 33.333333333%;
    background:#fff;
    border-bottom: 3px solid #f56671;
    padding: 30px 0;
    .img{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30 auto;
      .border{
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 20px rgba(233, 28, 28,.1);
        background: url("@/assets/images/rand-ico.png") no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        .rand{
          background-image: linear-gradient(to top, #f96262, #e91c1c);
          width: 110px;
          height: 110px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 50px;
          }
        }
      }
    }
    .tit{
      font-size: 24px;
      font-weight: bold;
      color: #202020;
      text-align: center;
      line-height: 50px;
      position: relative;
      &::before{
        content: '';
        position: absolute;
        width: 80px;
        height: 2px;
        background: #e91c1c;
        border-radius: 2px;
        bottom: 0;
        left: calc(50% - 40px);
      }
    }
    .content{
      text-align: center;
      padding: 35px;
      p{
        line-height: 35px;
        color: #656464;
        font-size: 18px;
      }
    }
    &:nth-child(2){
      margin: 0 80px;
    }
  }
}
</style>
